<template>
  <PageContainer>
    <Header v-model="headerHeight" title="标签成员">
      <view class="hb-h-9 hb-box-content hb-py-2 hb-px-4">
        <TSearch text="搜索" @confirm="handleConfirm"></TSearch>
      </view>
    </Header>
    <view class="hb-p-4 hb-pt-0 hb-relative">
      <view class="hb-bg-[#f7f8fa] hb-py-4 hb-sticky hb-z-10" :style="{ top: headerHeight + 'px' }">
        <TmText _class="hb-font-bold" :label="getTagName" :font-size="32" />
      </view>
      <template v-for="item in dataList" :key="item.botFriendLabelId">
        <view
          class="hb-p-3 hb-w-full hb-mb-4 hb-rounded-xl hb-flex hb-items-center hb-bg-white hb-box-shadow-base"
        >
          <TmImage
            class="hb-flex-shrink-0"
            :src="item.iconFileUrl"
            :width="128"
            :height="128"
            :round="4"
          />
          <view class="hb-ml-3 hb-flex-1 hb-h-16 hb-flex hb-flex-col hb-justify-between">
            <TmText _class="hb-font-bold text-overflow-1" :label="item.botName" :font-size="32" />
            <TmText
              :label="item.description"
              _class="text-overflow-1"
              color="#969799"
              :font-size="24"
            />

            <AuthenticationTag :certification-type="item.certificationType" />
          </view>
        </view>
      </template>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* tagMembers 标签成员 */
  import { labelFriendList } from '@/api/contact';
  import { LabelFriendListResult } from '@/api/contact/types';

  const headerHeight = ref(44);

  const dataList = ref<LabelFriendListResult[]>([]);
  const tagName = ref('');
  const id = ref<number>();

  customOnload<'tagMembers'>((op) => {
    tagName.value = op.tagName;
    id.value = op.id;
    getLabelFriendList()
  });

  function getLabelFriendList(keyWord?: string) {
    labelFriendList({ id: id.value!, keyWord }).then((res) => {
      dataList.value = res;
    })
  }

  const getTagName = computed(() => `${tagName.value}（${dataList.value.length}）`);

  /** 搜索 */
  const handleConfirm = (val: string) => {
    getLabelFriendList(val)
  };
</script>

<style lang="scss" scoped></style>
